<template>
	<view class="wrap">
		<u-toast ref="uToast" />
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30" style="margin-left: 20rpx;margin-right: 20rpx;margin-top: 15rpx;">
			<view class="u-m-r-10" @click="userinfo(model[0].p_id)">
				<u-avatar :src="model[0].p_ava" size="140"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">{{model[0].p_name}}
					<u-icon v-if="model[0].p_gender == '男'" size="40" name="../../../static/boy.png"></u-icon>
					<u-icon v-if="model[0].p_gender == '女'" size="40" name="../../../static/girl.png"></u-icon>
				</view>
				<view class="u-font-14 u-tips-color">{{model[0].identity}}
					
				</view>
			</view>
			<view class="u-m-l-10 u-p-10" v-if="model[0].p_id != m_id">
				<u-button v-if="mode == 0" type="primary" shape="circle" size="mini" @click="focus(u_id)">关注</u-button>
				<u-button v-if="mode == 1" type="success" shape="circle" size="mini" @click="ufocus(u_id)">已关注</u-button>
			</view>
		</view>
		<view style="margin-left: 20rpx;margin-right: 20rpx;">
			<u-line color="primary" />
			<view class="btn">
				<u-grid :col="3" :border='border'>
					<u-grid-item>
						<u-avatar src="../../../static/weizhi.png"></u-avatar>
						<view class="grid-text">{{model[0].faceplace}}</view>
					</u-grid-item>
					<u-grid-item>
						<u-avatar src="../../../static/qizhi.png"></u-avatar>
						<view class="grid-text">{{model[0].title}}</view>
					</u-grid-item>
					<u-grid-item>
						<u-avatar src="../../../static/qian.png"></u-avatar>
						<view class="grid-text">{{model[0].payment}}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<u-line color="primary" />
		</view>

		<view class="content">
			<view class="text">{{model[0].content}}</view>
			<view style="color: gray;" v-if="model[0].p_time!=''">约拍时间：{{model[0].p_time}}</view>
			<view style="color: gray;" v-if="model[0].money!=0">费用：{{model[0].money}}</view>
			<view class="img" style="margin-bottom: 20rpx;" v-for="(res,index) in model[0].urls">
				<u-image @click="previewImage(index,model[0].urls)" :src="res" mode="widthFix"></u-image>
			</view>
			<view class="bottom">
				<view class="time">{{model[0].pub_date}}</view>
				<view class="view">阅读量{{model[0].view}}</view>
			</view>

			<view class="tags">
				<u-tag class="tag" v-for="(res1,index1) in model[0].p_tags" shape="circle" :text="res1" mode="plain" />
			</view>

		</view>

		<u-gap height="20" bg-color="#eaeaea"></u-gap>

		<view class="number">
			<view style="margin-bottom: 15rpx;">收到的约拍{{model[0].y_num}}条</view>
			<u-row gutter="16">
				<u-col span="2" v-for="(ins,indes) in ava">
					<u-avatar size="50" :src="ins.u_ava"></u-avatar>
				</u-col>
			</u-row>
		</view>

		


		<view class="navigation">
			<view class="right">
				<view v-if="model[0].b==null" class="cart btn u-line-1" @click="getSc(id)">收藏</view>
				<view v-else class="buy btn u-line-1" @click="unSc(id)">收藏</view>
				
			</view>
			<view class="right">
				
				<view class="buy btn u-line-1" @click="yuepai">约拍</view>
			</view>
		</view>

	</view>

</template>

<script>
	import api from '@/api/api.js'
	export default {
		data() {
			return {
				id: '',
				m_id: '',
				m_ava: '',
				m_gender: '',
				m_name: '',
				inverted: true,
				mode: null,
				model: [],
				ava: [],
				border: false,	
			}
		},
		//获取传参值
		onLoad(res) {
			this.id = res.id;
			//console.log(this.id)
			this.init();
			
			//this.view();
			
		},
		onShow() {
			this.init();
			//this.view();
			uni.request({
				url: api.baseUrl+'/users/view',
				method: 'GET',
				data: {
					id: this.id
				}
			})
		},
		methods: {
			getSc(res) {
				let y_id = res
				uni.request({
					url: api.baseUrl+'/shoucangY',
					method: 'POST',
					data: {
						id: y_id,
						u_id: this.m_id
					},
					success: (res) => {
						if (res.data.code == '1') {
							this.init();
							this.$refs.uToast.show({
								title: '收藏成功',
								type: 'success',
								duration: '1000'
							})
						}
			
					}
				})
			},
			unSc(res) {
				let y_id = res
				uni.request({
					url: api.baseUrl+'/unshoucangY',
					method: 'POST',
					data: {
						id: y_id,
						u_id:this.m_id
					},
					success: (res) => {
						if(res.data.code=='1'){
							this.init();
							this.$refs.uToast.show({
								title: '取消收藏',
								type: 'warning',
								duration: '1000'
							})
						}
						
					}
				})
			},
			init(){
				uni.getStorage({
					key: 'userinfo',
					success: (res) => {
						this.m_id = res.data.openid
						this.m_ava = res.data.avatarUrl
						this.m_name = res.data.nickName
						this.m_gender = res.data.gender
						uni.request({
							url: api.baseUrl+'/users/getY',
							method: 'POST',
							data: {
								id: this.id,
								u_id:this.m_id
							},
							success: (res1) => {
								//console.log(res1)
								this.model = res1.data
								uni.request({
									url: api.baseUrl+'/users/getfocus',
									method: 'POST',
									data: {
										u_id: this.model[0].p_id,
										m_id: this.m_id,
									},
									success: (res) => {
									//	console.log(res)
										if (res.data.length == 0) {
											this.mode = 0
										} else {
											this.mode = 1
										}
									}
								})
								
							}
						})	
						
						uni.request({
							url: api.baseUrl+'/y_ava',
							method: 'POST',
							data: {
								id: this.id
							},
							success: (res) => {
								this.ava = res.data
							}
						})
					},
					fail: (rea) => {
						uni.showToast({
							title: '您尚未登录，请登录后操作！'
						})
						uni.navigateTo({
							url: '../../user/login'
						})
					}
				})
			},
			home() {
				uni.switchTab({
					url: '../yuepai'
				})
			},
			yuepai() {
				uni.navigateTo({
					url: '../submit?name=' + this.model[0].p_name + '&ava=' + this.model[0].p_ava + '&gender=' + this.model[0].p_gender +
						'&identity=' + this.model[0].identity + '&id=' + this.id + '&u_id=' + this.model[0].p_id

				})
			},
			focus(res) {
				this.mode = 1
				uni.request({
					url: api.baseUrl+'/users/focus',
					method: 'POST',
					data: {
						u_id: this.m_id,
						f_id: this.model[0].p_id,
						f_ava: this.model[0].p_ava,
						f_name: this.model[0].p_name,
						f_gender: this.model[0].p_gender,
						m_ava: this.m_ava,
						m_name: this.m_name,
						m_gender: this.m_gender
					}
				})
				this.$refs.uToast.show({
					title: '关注成功',
					type: 'success'
				})
			},
			ufocus(res) {
				this.mode = 0
				uni.request({
					url: api.baseUrl+'/users/ufocus',
					method: 'POST',
					data: {
						u_id: this.model[0].p_id,
						f_id: this.m_id
					}
				})
				this.$refs.uToast.show({
					title: '您已取消关注',
					type: 'warning'
				})
			},
			userinfo(res) {
				uni.navigateTo({
					url: '../../user/userinfo/userinfo?u_id=' + res
				})
			},
			//图片预览
			previewImage(current, photos) {

				//console.log(current)
				//console.log(photos)
				uni.previewImage({
					current,
					urls: photos
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		height: 100%;
	}

	.navigation {
		display: flex;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		position: fixed;
		z-index: 999;
		left: 0;
		right: 0;
		bottom: 0;
		height: 8vh;
		align-items: center;
		justify-content: space-around;

		.left {
			display: flex;
			font-size: 20rpx;
			padding: 15rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			//margin-left: 90rpx;
			margin-right: 20rpx;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ef9ab6;
				//margin-right: 30rpx;
			}

			.buy {
				background-color: #fecf87;
			}
		}
	}

	.number {
		margin-top: 10rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 8vh;
	}

	.wrap {
		//padding: 20rpx;
		height: 100%;
	}

	.title {
		display: inline;
		margin-left: 15rpx;
	}

	.titles {
		padding: 10rpx;
	}

	.content {
		margin-top: 10rpx;
		margin-bottom: 25rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;

		.bottom {
			display: list-item;
		}

		.text {
			margin-bottom: 15rpx;
		}

		.img {}

		.time {
			float: left;
		}

		.view {
			float: right;
		}

		.tags {
			margin-top: 10rpx;
		}

		.tag {
			padding: 10rpx;
		}
	}

	.pic {
		.img_wrapper {
			width: 190upx;
			height: 150upx;
			margin-right: 15upx;
			display: inline-block;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.example {
		margin-top: 10rpx;
		margin-bottom: 50rpx;
		padding-bottom: 50rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
</style>
